<template>
	<page-layout class="page">
		<pure-gap size="12px"></pure-gap>

		<view class="pj-padding-sides">
			<!-- 基础使用 -->
			<pj-demo title="基础使用">
				<pure-theme
					class="theme"
					theme="primary"
					>基础使用</pure-theme
				>
				<pure-gap></pure-gap>
				<pure-theme
					class="theme"
					theme="success"
					>基础使用</pure-theme
				>
				<pure-gap></pure-gap>
				<pure-theme
					class="theme"
					theme="warning"
					>基础使用</pure-theme
				>
				<pure-gap></pure-gap>
				<pure-theme
					class="theme"
					theme="danger"
					>基础使用</pure-theme
				>
				<pure-gap></pure-gap>
				<pure-theme
					class="theme"
					theme="info"
					>基础使用</pure-theme
				>
				<pure-gap></pure-gap>
			</pj-demo>

			<!-- 幽灵样式 -->
			<pj-demo title="幽灵样式">
				<pure-theme
					class="theme"
					ghost
					theme="primary"
					>幽灵样式</pure-theme
				>
				<pure-gap></pure-gap>
				<pure-theme
					class="theme"
					ghost
					theme="success"
					>幽灵样式</pure-theme
				>
				<pure-gap></pure-gap>
				<pure-theme
					class="theme"
					ghost
					theme="warning"
					>幽灵样式</pure-theme
				>
				<pure-gap></pure-gap>
				<pure-theme
					class="theme"
					ghost
					theme="danger"
					>幽灵样式</pure-theme
				>
				<pure-gap></pure-gap>
				<pure-theme
					class="theme"
					ghost
					theme="info"
					>幽灵样式</pure-theme
				>
				<pure-gap></pure-gap>
			</pj-demo>

			<!-- 镂空样式 -->
			<pj-demo title="镂空样式">
				<pure-theme
					class="theme"
					plain
					theme="primary"
					>镂空样式</pure-theme
				>
				<pure-gap></pure-gap>
				<pure-theme
					class="theme"
					plain
					theme="success"
					>镂空样式</pure-theme
				>
				<pure-gap></pure-gap>
				<pure-theme
					class="theme"
					plain
					theme="warning"
					>镂空样式</pure-theme
				>
				<pure-gap></pure-gap>
				<pure-theme
					class="theme"
					plain
					theme="danger"
					>镂空样式</pure-theme
				>
				<pure-gap></pure-gap>
				<pure-theme
					class="theme"
					plain
					theme="info"
					>镂空样式</pure-theme
				>
				<pure-gap></pure-gap>
			</pj-demo>

			<!-- 自定义背景透明度 -->
			<pj-demo title="自定义背景透明度">
				<pure-theme
					class="theme"
					ghost
					bgOpacity="0.1"
					block
					theme="primary"
					>自定义背景透明度</pure-theme
				>
				<pure-gap></pure-gap>
				<pure-theme
					class="theme"
					ghost
					bgOpacity="0.1"
					block
					theme="success"
					>自定义背景透明度</pure-theme
				>
				<pure-gap></pure-gap>
				<pure-theme
					class="theme"
					ghost
					bgOpacity="0.1"
					block
					theme="warning"
					>自定义背景透明度</pure-theme
				>
				<pure-gap></pure-gap>
				<pure-theme
					class="theme"
					ghost
					bgOpacity="0.1"
					block
					theme="danger"
					>自定义背景透明度</pure-theme
				>
				<pure-gap></pure-gap>
				<pure-theme
					class="theme"
					ghost
					bgOpacity="0.1"
					block
					theme="info"
					>自定义背景透明度</pure-theme
				>
				<pure-gap></pure-gap>
			</pj-demo>
		</view>

		<pure-gap size="12px"></pure-gap>
	</page-layout>
</template>

<script setup></script>

<style lang="scss" scoped>
	.theme {
		padding: 16px;
		text-align: center;
	}
</style>
